<template>
<el-select
        clearable
        v-model="BatchID"
        placeholder="周次"
        size="small"
        style="width: 200px; margin-right: 10px"
        @change="getTestListNew"
      >
        <el-option
          v-for="item in optionsbatch"
          :key="item.BatchID"
          :label="`${item.Year}年第${item.Term}学期第${item.Week}周`"
          :value="item.BatchID"
        ><span>
          {{item.Year}}年第{{item.Term}}学期第{{item.Week}}周
        </span>
        <span v-if="item.IsCurrent==1" style="margin-left:3px">
          <em class="state state-1 status-processing"></em>
        </span>
        </el-option>
      </el-select>
  <el-select
        clearable
        v-model="Grade"
        placeholder="年级"
        size="small"
        style="width: 200px; margin-right: 10px"
        @change="getTestListNew"
      >
        <el-option
          v-for="(item,index) in optionsGrade" 
          :key="index"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
  <el-input
        v-model="Class"
        maxlength="30"
        style="width: 200px; margin-right: 10px"
        placeholder="班级"
        size="small"
        clearable
        @input="getTestListNew"
      />
       <el-input
        v-model="Name"
        maxlength="30"
        style="width: 200px; margin-right: 10px"
        placeholder="姓名"
        size="small"
        clearable
        @input="getTestListNew"
      />
       <el-input
        v-model="StudentID"
        maxlength="30"
        style="width: 200px; margin-right: 10px"
        placeholder="学号"
        size="small"
        clearable
        @input="getTestListNew"
      />

      

  <el-button type="primary" icon="el-icon-refresh-right" @click="getTestList"></el-button>

  <el-divider direction="vertical" />

  <el-button type="primary" icon="el-icon-upload2" @click="GetTestExcel"></el-button>

  <el-table :data="studentDetectionList" stripe style="width: 100%">
    <el-table-column prop="batch_info" label="周次" />
    <el-table-column prop="Grade" label="年级"/>
    <el-table-column prop="Class" label="班级"/>
    <el-table-column prop="Name" label="姓名" />
    <el-table-column prop="StudentID" label="学号" />
    <el-table-column prop="TestTime" label="检测时间" />
    <el-table-column prop="TestResults" label="检测结果" >
    <template #default="scope">
        <div v-if="scope.row.TestResults == '阴性'">
            <em class="state state-3"></em>{{scope.row.TestResults}}
          </div>
          <div v-else>
            <em class="state state-6 status-processing"></em>{{scope.row.TestResults}}
          </div>
      </template>
      </el-table-column>
      <el-table-column prop="NameTest" label="姓名校验">
        <template #header>
        姓名校验<el-switch v-model="NameTestSwitch" style="margin-left:3px" @change="NameTestSwitchChange"/>
      </template>
    <template #default="scope">

      <div v-if="scope.row.NameTest != 0 && NameTestSwitch">
            <el-tooltip
        effect="dark"
        :content="`系统名字识别结果为 ${scope.row.NameInImage}`"
        placement="top"
      >
      <div><em class="state state-6 status-processing"></em>异常</div>
      </el-tooltip>
          </div>

        <div v-else>
            <em class="state state-3"></em>正常
          </div>


        
      </template>
      </el-table-column>
    <el-table-column prop="ImageUrl" label="截图" >
      <template #default="scope" >
        <div style="display: flex;align-items: center;cursor:zoom-in" @click="showImage(scope.row.ImageUrl)">
        <el-image :src="scope.row.ImageUrl" style="height:70px">
        <template #placeholder >
          <div v-loading="true" style="height:70px;width:40px">
          </div>
        </template>
        </el-image>
        </div>
      </template>
    </el-table-column>

    <el-table-column prop="CreateTime" label="上传时间" />
    
    <el-table-column label="操作">
    <template #default="scope">

      <el-popconfirm
          v-if="scope.row.TestResults != '阴性'"
            confirm-button-text="确认"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="是否修改检测结果为阴性?"
            @confirm="handlePutResult(scope.$index, scope.row)"
          >
            <template #reference>
             <el-button type="text">结果修正</el-button>
            </template>
          </el-popconfirm>

          <el-divider direction="vertical" v-if="scope.row.TestResults != '阴性'"/>

       <el-popconfirm
          v-if="scope.row.NameTest == 1 && NameTestSwitch"
            confirm-button-text="确认"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="是否修改姓名校验为正常?"
            @confirm="handlePutNormal(scope.$index, scope.row)"
          >
            <template #reference>
             <el-button type="text">姓名修正</el-button>
            </template>
          </el-popconfirm>

          <el-divider direction="vertical"  v-if="scope.row.NameTest == 1 && NameTestSwitch"/>

       <el-popconfirm
            confirm-button-text="确认"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确认删除?"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <template #reference>
              <el-button type="text">删除</el-button>
            </template>
          </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

   <el-pagination
      style="margin-top:10px"
      background 
      :hide-on-single-page="true"
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="changePage"
    />

    <el-dialog v-model="dialogVisibleAdd" top="2vh" title="图片"> 
        <el-image :src="imgsrc" style="width: auto;height: 75vh;margin: auto;">
        <template #placeholder >
          <div v-loading="true" style="height:75vh;width:40px">
          </div>
        </template>
        </el-image>
    </el-dialog>

    <el-dialog v-model="dialogVisibleUpload" title="导出Excel">
      <el-form :model="form" :rules="rules" label-width="120px">
      <el-form-item label="周次" prop="BatchID">
      <el-select
        clearable
        v-model="form.BatchID"
        placeholder="周次"
        size="small"
        style="width: 200px; margin-right: 10px"
        @focus="getBatchList"
      >
        <el-option
          v-for="item in optionsbatch"
          :key="item.BatchID"
          :label="`${item.Year}年第${item.Term}学期第${item.Week}周`"
          :value="item.BatchID"
        ><span>
          {{item.Year}}年第{{item.Term}}学期第{{item.Week}}周
        </span>
        <span v-if="item.IsCurrent==1" style="margin-left:3px">
          <em class="state state-1 status-processing"></em>
        </span>
        </el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="年级" prop="Grade">
      <el-select
        clearable
        v-model="form.Grade"
        placeholder="年级"
        size="small"
        style="width: 200px; margin-right: 10px"
      >
        <el-option
          v-for="(item,index) in optionsGrade" 
          :key="index"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      </el-form-item>
      </el-form>

      <template #footer>
      <el-button @click="UploadAllBatch()">全部导出</el-button>
     <el-button type="primary" @click="UploadCurrentBatch()">筛选导出</el-button>
     </template>
    </el-dialog>

</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import { ElMessage } from "element-plus";
import Test from "@/api/model/test";
import Batch from "@/api/model/batch";
export default {
  setup() {
    const state = reactive({
      studentDetectionList:[],
      Grade:"",
      Class:"",
      Name:"",
      StudentID:"",
      BatchID:"",
      optionsbatch:[],
      optionsGrade:["本科21级","本科20级","本科19级","本科18级","硕士","博士"],
      total: 0, // 总条数
      currentPage: 1, // 当前页
      pageSize: 10, // 分页大小
      batchTotal: 0, // 总条数
      batchCurrentPage: 1, // 当前页
      batchPageSize: 10, // 分页大小
      dialogVisibleAdd:false,
      dialogVisibleUpload:false,
      NameTestSwitch:JSON.parse(localStorage.getItem("NameTestSwitch")),
      imgsrc:"",
      form:{
        BatchID:"",
        Grade:""
      },
      rules:{
        BatchID: [
          {
            required: false,
            message: "不填默认全部",
            trigger: "blur",
          }
        ],
        Grade: [
          {
            required: false,
            message: "不填默认全部",
            trigger: "blur",
          }
        ],
      }
    });

    const getTestList=()=>{
       const params = {
        Grade:state.Grade,
        Class:state.Class,
        Name:state.Name,
        StudentID:state.StudentID,
        BatchID:state.BatchID,
        Page: state.currentPage,
        Size: state.pageSize,
      };
      Test.APITestList.http(params).then((res) => {
        state.studentDetectionList=res.data;
        state.total = res.totalCount;
      });
    }

    const getBatchList=()=>{
      if(state.optionsbatch.length!=0) return;
       const params = {
        Page: state.batchCurrentPage,
        Size: state.batchPageSize,
      };
      Batch.APIBatchList.http(params).then((res) => {
        
        state.optionsbatch=state.optionsbatch.concat(res.data);
        state.batchTotal = res.totalCount;
         //选中当前周次
        for(let item=0;item<state.optionsbatch.length;item++){
          if(state.optionsbatch[item].IsCurrent==1){
            state.BatchID=state.optionsbatch[item].BatchID;
            getTestList();
            return
          }
        }
        //可以考虑懒加载优化
        if(state.batchTotal/state.batchPageSize-state.batchCurrentPage>0){
          state.batchCurrentPage=state.batchCurrentPage+1;
          getBatchList();
        }
      });
      
    }

    const GetTestExcel=()=>{
        state.dialogVisibleUpload=true;
    }        

    const UploadCurrentBatch=()=>{
      let timetemp =new Date().getTime()
      let aTag = document.createElement('a');
      aTag.href = "http://39.96.83.19:5200/api_1_0/test/get_excel?BatchID="+state.form.BatchID+"&Grade="+state.form.Grade+"&timetemp="+timetemp;
      aTag.click();
    }

    const UploadAllBatch=()=>{
      let timetemp =new Date().getTime()
      let aTag = document.createElement('a');
      aTag.href = "http://39.96.83.19:5200/api_1_0/test/get_excel?timetemp="+timetemp
      aTag.click();
    }

    const showImage=(val)=>{
      state.imgsrc=val;
      state.dialogVisibleAdd=true;
    }

    const handleDelete=(index, row)=>{
       const params = {
        RecordID:row.RecordID
      };
      Test.APITestDelete.http(params).then((res) => {
        if (res.code === "2000") {
          getTestList();
          ElMessage({
            message: "删除成功.",
            type: "success",
          });
        } else {
          ElMessage.error("删除失败");
        }
      });
    }

    const handlePutNormal=(index, row)=>{
      const params = {
        RecordID:row.RecordID
      };
      Test.APITestUpdate.http(params).then((res) => {
        if (res.code === "2000") {
          getTestList();
          ElMessage({
            message: "修改成功.",
            type: "success",
          });
        } else {
          ElMessage.error("修改失败");
        }
      });
    }

    const handlePutResult=(index, row)=>{
      const params = {
        RecordID:row.RecordID
      };
      Test.APITestUpdateRe.http(params).then((res) => {
        if (res.code === "2000") {
          getTestList();
          ElMessage({
            message: "修改成功.",
            type: "success",
          });
        } else {
          ElMessage.error("修改失败");
        }
      });
    }

    const getTestListNew=()=>{
      state.currentPage = 1;
       getTestList();
    }

     // 换页
    const changePage = (val) => {
       state.currentPage = val;
       getTestList();
    };

    const NameTestSwitchChange = (val)=>{
        const _set = JSON.stringify(val)
        localStorage.setItem("NameTestSwitch", _set)
    }

    onMounted(() => {
      getBatchList();
    });

    return {
      ...toRefs(state),
      changePage,
      getTestList,
      showImage,
      handleDelete,
      GetTestExcel,
      UploadCurrentBatch,
      UploadAllBatch,
      handlePutNormal,
      handlePutResult,
      getTestListNew,
      NameTestSwitchChange,
    };

  },
};
</script>

<style>
.state {
    width: 8px;
    height: 8px;
    background: #ddd;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
}

.state-1 {
    background: #409eff;
}

.state-2 {
    background: #409eff;
}

.state-3 {
    background: #67c23a;
}

.state-4 {
    background: #e6a23c;
}

.state-5 {
    background: #dddddd;
}

.state-6 {
    background: #f56c6c;
}

.status-processing {
    position: relative;
}

.status-processing:after {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    content: "";
    animation: warn 1.2s ease-in-out infinite;
}

@keyframes warn {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.el-dialog__body{
  display: flex;
}
</style>